<template>
  <div class="zhinengjiangben">
    <div class="maindiv">
      <div style="position: relative; height: 69%; top: 6rem">
        <div class="mainContent2" style="height: 100%">
          <div class="ecrratetopunder2">
            <div class="ecrratemainright2">
              <div
                class="flexcolumn2"
                style="width: 23%"
                v-for="item in recordT"
                :key="item.id"
              >
                <p class="fontstyleznjb" id="znjbwzsb">{{ item.percentage }}</p>
                <img
                  src="@/assets/henglantiao.png"
                  class="maintopimg2"
                  style="width: 55%"
                />
                <p style="font-size: 20px; color: #192c56">{{ item.name }}</p>
              </div>
            </div>
            <div
              class="ecrrateleftover2"
              style="left: -5rem; top: -5rem"
              @mouseover="prompt = true"
              @mouseout="prompt = false"
            >
              <div class="styleshijian" v-if="prompt">
                累计降本率 = （有效最高报价 - 中标金额）/ 有效最高报价
              </div>
              <p style="font-size: 1.3rem">累计降本率</p>
              <div
                style="height: 0.05rem; width: 100%; background-color: white"
              ></div>
              <p
                class="jiangbanfontstyle2"
                style="font-size: 2.3rem"
                id="ljjbl"
                @mouseover="prompt = true"
                @mouseout="prompt = false"
              >
                {{ zonggongsijiangbenlv || "0.00% " }}
              </p>
            </div>
            <div class="public ecrratetopcheck2">
              <div style="display: flex">
                <!-- <div class="jiantoudatepiackerznjb">
                  <YYDatePick
                    range
                    :highlight-range="true"
                    type="month"
                    :to-body="false"
                    v-model="znjbsondatepicker"
                    arrow
                    clearable
                  ></YYDatePick>
                </div> -->


                <div class="style3">
                    <dataPicker
                      v-model="znjbsondatepicker"
                      type="monthrange"
                      value-format="yyyy-MM"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :editable="false"
                      prefix-icon="1"
                    />
                  </div>

                <!-- rotateArrow -->
                <!-- 、、arrow -->
                <!-- <div class="rengedatepicker">
                  <el-date-picker
                    value-format="yyyy-MM"
                    :editable="false"
                    type="monthrange"
                    range-separator="-"
                    prefix-icon="el-icon-edit"
                    start-placeholder="开始日期1"
                    end-placeholder="结束日期"
                    v-model="znjbsondatepicker"
                  >
                  </el-date-picker>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import * as echarts from "echarts";
import { Message } from "element-ui";
import { monthDate } from "@/utils/common";
import Znjbdialogtop from "@/components/znjbdialogtop.vue";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
export default {
  props: {},
  components: { Znjbdialogtop, YYDatePick,dataPicker },
  data() {
    return {
      zonggongsijiangbenlv: "",
      znjbsondatepicker: ["2023-04", monthDate()],
      prompt: false,
      isbgjb: false,
      recordT: [],
    };
  },
  watch: {
    znjbsondatepicker(newval, oldval) {
      console.log(newval, "newVAL");
      if (newval == null) {
        return;
      }
      this.getSonCompanyEconomyRate("", this.$store.state.orgName);
    },
  },
  mounted() {
    this.getSonCompanyEconomyRate("", this.$store.state.orgName);
  },
  methods: {
    getSonCompanyEconomyRate(orgCode, orgName) {
      console.log(orgCode, orgName, "orgCode,orgName");
      let arr = [];
      APIS.Znjb.getEconomyRate({
        orgName: orgName,
        startDate: this.znjbsondatepicker[0],
        endDate: this.znjbsondatepicker[1],
      })
        .then((res) => {
          console.log(res, "res");
          if (
            res.data != null &&
            Object.getOwnPropertyNames(res.data).length != 0
          ) {
            console.log(2222);
            this.zonggongsijiangbenlv = res.data["economy"];
            for (let i = 0; i < this.$store.state.projectlistarr.length; i++) {
              for (const key in res.data) {
                if (this.$store.state.projectlistarr[i].title === key) {
                  if (key != "economy") {
                    let ecomyarr = res.data[key].split("%");
                    let noone = ecomyarr[0] - 0;
                    if (noone > 0) {
                      arr.push({ percentage: res.data[key], name: key });
                    } else {
                      arr.push({ percentage: "0.00%", name: key });
                    }
                  }
                }
              }
            }
          } else {
            this.zonggongsijiangbenlv = "0.00%";
            arr = [
              { percentage: "0.00%", name: "项目类物资设备" },
              { percentage: "0.00%", name: "项目类机械租赁" },
              { percentage: "0.00%", name: "项目类劳务分包" },
              { percentage: "0.00%", name: "项目类专业分包" },
              { percentage: "0.00%", name: "项目类服务采购" },
              { percentage: "0.00%", name: "非项目物资采购" },
              { percentage: "0.00%", name: "非项目服务采购" },
              { percentage: "0.00%", name: "非生产经营类" },
            ];
          }
          console.log(arr, "arr");
          this.recordT = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.zhinengjiangben {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  .maindiv {
    width: 100%;
    height: 100%;
  }
}
::v-deep .style3 {
  height: 1.4rem;
  width: 12rem;
  margin-left: 0.3rem;
  .el-date-editor--monthrange.el-input,
  .el-date-editor--monthrange.el-input__inner {
    width: 100%;
    height: 100%;
    border-radius: 1.1rem;
    border: 0.05rem solid #192c55;
    position: relative;
    background-color: transparent;
  }
  .el-date-editor .el-range__icon {
    position: absolute;
    right: 0;
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    content: "";
  }
  .el-date-editor .el-range__close-icon,
  .el-range-separator {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .el-input__inner {
    background-color: transparent;
  }
  .el-range-editor .el-range-input {
    background-color: transparent;
  }
  .el-date-editor .el-range__close-icon {
    margin-right: 0.5rem;
  }
}
</style>
